<template>
  <div class="imageText-view" v-loading.lock="loading" element-loading-background="rgb(0, 0, 0)">
    <el-scrollbar ref="menuScrollbar" class="imageText-scrollbar">
      <div class="imageText-content" v-html="fileurl"></div>
      <div class="imageText-fullScreen" @click="onFullScreen">
        <i class="edu-icon-quanping"></i>
      </div>
    </el-scrollbar>

    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      fullscreen
      custom-class="imageText-dialog"
    >
      <el-scrollbar ref="menuScrollbar" class="imageText-scrollbar">
        <div class="imageText-content" v-html="fileurl"></div>
        <div class="imageText-fullScreen" @click="onFullScreen">
          <i class="edu-icon-quanping"></i>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import eventVue from '../sectiobWatchEventVue.js'
export default {
  data() {
    return {
      fileurl: '',
      timer: null,
      seconds: 0,
      dialogVisible: false,
      loading: false
    }
  },
  props: {
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState({
      getCurrentPlayItem: state => state.course.currentPlayItem
    })
  },
  mounted() {
    this.getPlayerFile()
    eventVue.$on('sendSectionBybus', () => {
      this.getPlayerFile()
    })
  },
  methods: {
    getPlayerFile() {
      clearInterval(this.timer)
      this.seconds = 0
      this.timer = null
      this.loading = true
      let class_id = this.detailInfo.course_type === 4 ? this.detailInfo.id : 0
      this.$api.getCourseSectionFileurl(
        this.getCurrentPlayItem.course_id,
        this.getCurrentPlayItem.id,
        {
          class_id: class_id
        },
        res => {
          const { data } = res
          this.fileurl = data.fileurl_string_text
          // 当前播放定位
          this.$store.dispatch('course/setCurrentPlayPosition', {
            ...data.curr_position
          })
          setTimeout(() => {
            this.loading = false
            this.timing()
          }, 200)
        }
      )
    },
    // 添加学习记录
    addLearning() {
      this.$api.createCourseRecord({
        course_id: this.getCurrentPlayItem.course_id,
        section_id: this.getCurrentPlayItem.id,
        current_time: this.seconds
      })
    },
    // 定时添加学习记录
    timing() {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.seconds++
        if (this.seconds % 10 == 0) {
          this.addLearning()
        }
      }, 1000)
    },
    onFullScreen() {
      this.dialogVisible = !this.dialogVisible
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
.imageText-view {
  height: 486px;
  .imageText-content {
    min-height: 486px;
    background-color: #fff;
    padding: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    line-height: 1.5;
    box-sizing: border-box;
    ::v-deep img {
      max-width: 100%;
    }
  }
  .imageText-fullScreen {
    position: absolute;
    width: 24px;
    height: 24px;
    background: rgba(48, 49, 51, 0.3);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    bottom: 15px;
    right: 15px;
    transition: all 0.4s;
  }
  .imageText-scrollbar {
    height: 100%;
    ::v-deep .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  ::v-deep .imageText-dialog {
    background: #000000;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      height: 100%;
      padding: 10px 0 0;
      box-sizing: border-box;
    }
    .imageText-content {
      width: 1200px;
      margin: 0 auto;
      min-height: calc(100vh - 10px);
    }
    .imageText-fullScreen {
      bottom: 20px;
      right: 50%;
      margin-right: -644px;
      background: rgba(255, 255, 255, 0.2);
    }
  }
}
</style>
